<template>  
    <section class="search-bar">  
      <input type="text" placeholder="搜索商品..." v-model="searchQuery" />  
      <button @click="search">搜索</button>  
    </section>  
  </template>  
    
  <script>  
  export default {  
    name: 'SearchBar',  
    data() {  
      return {  
        searchQuery: ''  
      };  
    },  
    methods: {  
      search() {  
        // 你可以在这里添加搜索逻辑，比如调用API  
        console.log('搜索:', this.searchQuery);  
      }  
    }  
  }  
  </script>  
    
  <style scoped>  
  .search-bar {  
    margin-bottom: 20px;  
    text-align: center;  
  }  
    
  .search-bar input {  
    padding: 10px;  
    width: calc(100% - 120px);  
  }  
    
  .search-bar button {  
    padding: 10px 20px;  
  }  
  </style>